<template>
  <div class="calculate-header">
    <h2>
      <icon-svg
        :name="tag.tagFactoryType > 1 ? 'iconRole' : tag.tagFactoryType === 1 ? 'iconSql' : 'iconCalculate'"
        :class="{ 'calcalute-svg': tag.tagFactoryType === 0, 'sql-svg': tag.tagFactoryType === 1 }"
      ></icon-svg>
      {{ tag.tagNm }}
    </h2>
    <div class="factory-handler clearfix" v-if="tag.tagId">
      <span class="tips" v-if="tag.releaseStatus === 2">正在审核中</span>
      <slot name="pre"></slot>
      <el-button size="mini" @click="handleCopy">
        <icon-svg name="iconCopy"></icon-svg>
        复制
      </el-button>
      <el-button size="mini" v-if="move" @click="handleMove">
        <icon-svg name="iconMove"></icon-svg>
        移动
      </el-button>
      <template v-if="release">
        <el-button size="mini" v-if="release" @click="handleRelease(false)">
          <icon-svg :name="tag.releaseStatus ? 'iconRedo' : 'iconRelease'"></icon-svg>
          {{ tag.releaseStatus ? '取消发布' : '发布' }}
        </el-button>
      </template>
      <el-button size="mini" v-if="repush" @click="handleRelease(true)">
        <icon-svg name="iconInfoCheck"></icon-svg>
        重新发布
      </el-button>
      <slot name="suffix"></slot>
    </div>
    <calculate-operation-dialog ref="calculateOperationDialog" @callback="callback"></calculate-operation-dialog>
  </div>
</template>

<script>
import calculateOperationDialog from '../components/calculate-operation-dialog'
export default {
  components: {
    calculateOperationDialog
  },
  props: {
    tag: {
      type: Object,
      required: true,
      default: () => {}
    },
    move: {
      // 是否可移动
      type: Boolean,
      default: false
    },
    release: {
      // 是否可发布
      type: Boolean,
      default: false
    },
    repush: {
      // 是否重新发布
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    handleMove() {
      this.$refs.calculateOperationDialog.showDialog({
        tagId: this.tag.tagId,
        type: 'move'
      })
    },
    handleCopy() {
      this.$refs.calculateOperationDialog.showDialog({
        tagId: this.tag.tagId,
        type: 'copy'
      })
    },
    handleRelease(isAggain = false) {
      this.$confirm(
        `确定${isAggain ? '重新发布' : this.tag.releaseStatus ? '取消发布' : '发布'}【${this.tag.tagNm}】？`
      ).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$utils
          .release(
            this.tag.tagId,
            this.tag.tagNm,
            '10',
            isAggain || !this.tag.releaseStatus ? 'post' : 'delete',
            isAggain
          )
          .then(data => {
            this.$message.success(data.msg)
            this.$emit('callback')
          })
          .catch(data => {
            this.$message.error(data.data || data.msg)
          })
      })
    },
    callback() {
      this.$emit('callback')
    }
  }
}
</script>

<style lang="scss">
.calculate-header {
  display: flex;
  height: 50px;
  padding: 10px 0;
  h2 {
    color: #465fbc;
    padding-left: 15px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    &::before {
      width: 3px;
      content: '';
      background-color: #465fbc;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
    }
    svg {
      margin-right: 10px;
    }
    .calcalute-svg {
      width: 19px;
      height: 19px;
    }
    .sql-svg {
      width: 20px;
      height: 20px;
    }
  }
  .factory-handler {
    text-align: right;
    .el-button {
      font-size: 15px;
      color: #455fbc;
      background-color: transparent;
      border-color: transparent;
      &.disabled {
        color: #333;
      }
    }
    svg {
      width: 17px;
      height: 17px;
      margin-right: 3px;
      margin-top: -5px;
      vertical-align: middle;
    }
  }
  .tips {
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
    margin-top: -7px;
  }
}
</style>
